<template>

    <mi-list-page>


        <el-tabs model-value="" @tab-change="tabChange">
            <el-tab-pane label="全部" name=""></el-tab-pane>
            <el-tab-pane label="已上架" name="showON"></el-tab-pane>
            <el-tab-pane label="库存预警" name="stockDanger"></el-tab-pane>
            <el-tab-pane label="已下架" name="showOff"></el-tab-pane>
        </el-tabs>

        <mi-table :list="list" max-height="calc(100vh - 210px - 54px)">
            <template #topBar>

                <div class="d_flex flex_jc_sb">

                    <div>
                        <mi-top-bar
                            :data="topToolbar"
                        >
                        </mi-top-bar>
                    </div>

                    <!--                    搜索组件    -->
                    <mi-search-page :search="search" placeholder="ID/商品名称">
                        <el-form :model="search.info" ref="searchRef" :inline="true" label-width="68px">

                            <el-form-item label="分类" prop="cate">
                                <mi-input v-model="search.info.cate" />
                            </el-form-item>

                            <el-form-item label="商品名称" prop="title">
                                <mi-input v-model="search.info.title" />
                            </el-form-item>

                            <el-form-item label="库存">
                                <mi-input v-model="search.info.stock_num">
                                    <template #prepend>
                                        <mi-select v-model="search.info.stock_op"  :options="opOptions" style="width: 100px;" />
                                    </template>
                                </mi-input>
                            </el-form-item>

                            <el-form-item label="上下架" prop="show_type">
                                <mi-select v-model="search.info.show_type"  :options="global.productShowOptions" />
                            </el-form-item>
                        </el-form>
                    </mi-search-page>

                </div>

            </template>

            <template #product="{row}">
                <el-space class="f12">
                    <div>{{row.title}}</div>
                    <el-tag v-if="row.spec_type == 2">多规格</el-tag>
                </el-space>
            </template>

            <template #show="{row}">
                <el-tag v-if="row.show_type==1" type="success">已上架</el-tag>
                <el-tag v-else type="danger" effect="plain">已下架</el-tag>
            </template>

            <template #toolbar="{row}">
                <el-space wrap>
                    <el-button link type="primary" @click="clickShow(0,[row.id],`将下架${row.title}`)"
                               v-auth="auth.edit"
                               v-if="row.is_show==1"
                    >下架</el-button>
                    <el-button link type="primary" @click="clickShow(1,[row.id], `将上架${row.title}`)"
                               v-auth="auth.edit"
                               v-else
                    >上架</el-button>
                    <el-button link type="primary" @click="lineToolbarEvent('edit', row)" v-auth="auth.edit">编辑</el-button>
                    <el-button link type="primary" @click="lineToolbarEvent('del', row)" v-auth="auth.del">删除</el-button>
                </el-space>
            </template>

        </mi-table>

    </mi-list-page>

    <goods-edit show-type="page" />


</template>

<script setup lang="ts">

import {getCurrentInstance, onBeforeMount, onUpdated, provide, reactive, ref} from "vue"
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import {useRoute} from "vue-router";
import List from "@/model/list";
import Edit from "@/model/edit";
import {simpleGet, simplePost} from "@/utils/request";
import {FormInstance} from "element-plus";
import Search from "@/model/search";
import GoodsEdit from "@/views/store/goodsEdit.vue";

const route = useRoute()
const restoreUrl = '/product/handle/type/restore'
const initWhere = Object.assign({delete: 'normal'}, route.query)
const opOptions = global.opOptions

const {proxy} = getCurrentInstance() as any
const tdWidth = global.tdWidth
const auth = makeModelAuth('store.goods')

const tabChange = (name:string) => {
    const where : Record<string, any> = {...initWhere}    // 重置查询条件
    // 添加查询条件
    switch (name) {
        case 'showON':
            where.show_type = 1
            break
        case 'showOff':
            where.show_type = 2
            break
        case 'stockDanger':
            where.stockDanger = 1
            break
    }
    list.where = where
    list.reload(1)
}

const clickShow = (val: number, ids: number[], message?: string) => {
    message = message||`将${val==1 ? '上架':'下架' }${ids.length}个商品，请谨慎操作。`
    proxy.$confirm(
        message,
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        let loading = proxy.$loading({text:'正在执行，请稍候'})
        await simplePost( "/store.goods/updateShowType",{ids:ids, show_type:val})
        for(let i=0; i<list.items.length; i++){
            let id = list.items[i].id
            if (ids.includes(id)){
                list.items[i].show_type = val
            }
        }
        loading.close()
    }).catch(()=>{})
}


// toolbar 事件
const topToolbar:any = [
    {
        auth: auth.add,
        type: 'success',
        icon: 'Plus',
        title: '新增',
        event: (ids:Array<number>) => {
            list.currentRow = null
            edit.show = true
        }
    },
    {
        auth: auth.edit,
        title: '上架',
        type: 'primary',
        icon: 'Top',
        event: (ids: number[]) => {
            if (ids.length>0) clickShow(1,ids)
        }
    },
    {
        auth: auth.edit,
        title: '下架',
        type: 'info',
        icon: 'Bottom',
        event: (ids: number[]) => {
            if (ids.length>0) clickShow(0,ids)
        }
    },
    {
        auth: auth.del,
        title: '删除',
        type: 'danger',
        icon: 'Delete',
        event: (ids:Array<number>) => {
            list.del({
                url: `/${auth.del}`,
                ids: ids
            })
        }
    },
]


const lineToolbarEvent = (event:string, row:any) => {
    switch (event) {
        case 'edit':
            list.currentRow = row
            edit.show = true
            break
        case 'del':
            list.del({
                url:`/${auth.del}`,
                ids: [row.id],
                message: `您将删除【${row.title}】，是否继续？`
            })
            break
        case 'restore':
            list.restore({
                url: restoreUrl,
                ids: [row.id],
                message:`将恢复【${row.title}】，是否继续？`
            })
            break
        case 'force':
            list.del({
                url: `/${auth.del}`,
                ids: [row.id],
                message: `您将删除【${row.title}】，无法恢复，是否继续？`,
                isForce: true,
            })
            break
    }
}

const list = reactive(new List({
    where: initWhere,
    url: `/${auth.index}`,
    columns:[
        {name: "select", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "image", title: "封面", type:'image', width: tdWidth.image, align: 'center'},
        {name: "product", title: "标题", minWidth: tdWidth.title, type:'slot', slot:'product', tooltip:false},
        {name: "price", title:'售价', width: tdWidth.number, sort:true},
        {name: "stock", title:'库存', width: tdWidth.number, sort:true, align: 'center'},
        {name: "stock_danger", title:'库存预警', width: tdWidth.number, sort:true, align: 'center'},
        {name: "sales", title:'销量', width: tdWidth.number, sort:true, align: 'center'},
        {name: "show", title: "上下架", width: tdWidth.switch, type:'slot', slot:'show', align: 'center'},
        // {name: "status", title: "状态", width: tdWidth.switch, type:"switch", align: "center"},
        {title: "操作", type:'slot', slot:'toolbar', fixed:'right'},
    ]
}))

const edit = reactive(new Edit({}))

const searchRef = ref<FormInstance>()
const search = reactive(new Search({
    list:list,
    searchRef:searchRef.value
}))

const exportOut = reactive(new Edit({}))

provide("list", list)
provide("edit", edit)

</script>

<style scoped>

</style>
